<template>
  <form class="wrapper">
    <div id="layout">
      <div class="zk"></div>
      <div id="header">
        <div class="infoNav">
          <ul>
            <li style="width: 84px;height: 103px">
              <img id="detailbtn" class="kspic"
                   style="width:74px;height:96px;border:none;margin-top:-7px;margin-right:10px;cursor:pointer"
                   src="@/assets/static/imgkaoing/blue.jpg" onerror="@/assets/static/imgkaoing/blue.jpg'">
            </li>
            <li style="font-size:14px;color:#044950;position:relative;top:-10px;">
              <!--<div style="height:20px;"><label>考&emsp;试&emsp;科&emsp; 目：</label><span id="ksmc"></span></div>-->
              <!-- 姓名 -->
              <div style="height:20px;"><label>姓&emsp;&emsp;&emsp;&emsp;&emsp;名：</label><span
                  id="ksxm">{{ nickname }}</span></div>
              <!-- 座位号 -->
              <div style="height:20px;"><label>座&emsp;&emsp;位&emsp;&emsp;号：</label><span
                  id="ksxb">001</span></div>
              <!-- 准考证号 -->
              <div style="height:20px;"><label>准&emsp;考&emsp;证&emsp;号：</label><span
                  id="zkzh2">{{ idCard }}</span></div>
              <!-- 身份证号 -->
              <div style="height:20px;"><label>有效身份证件号：</label><span
                  id="sfzh">{{ idNumber }}</span></div>
            </li>
          </ul>
        </div>
        <div class="clockNav">
          <ul>
            <li class="clockNav_m">
              <!-- 考试倒计时 -->
              <div style="font-size:18px;color:red;font-weight:normal;">
                <!--                考试剩余时间:&nbsp;<span id="clock" ref="countDownRef">00:00:00</span>-->
              </div>
              <div style="margin-top:7px;font-size:16px;text-align:center">
									<span style="color:#044950;">未答:&nbsp;
                                        <span id="notPaperCount"
                                              style="color:red;">{{ maxQuestionIndex - answerQuestionCount }}</span>&nbsp;道
                                    </span>
                <span style="color:#044950;">已答:&nbsp;
                                    <span id="completePaperCount" style="color:black;">{{ answerQuestionCount }}</span>&nbsp;道&nbsp;
                                </span>
              </div>
            </li>
          </ul>
        </div>
        <div class="subjectNav">
						<span id="projectName"
                  style="font-size:28px;font-weight:normal; color:#044950; letter-spacing: 6px"
                  class="prname">{{ examName }}</span>
          <br>
          <!--                    <span id="subjectName" style="color:#044950;font-size:24px;font-weight:normal;">基础科目</span>-->
        </div>
      </div>
      <div id="main">
        <div id="leftnav" style="width:384px; height: 100%" ref="leftNav">
          <!-- 注意事项 标题 -->
          <div class="submark" @click="isOpenTip = !isOpenTip" style="font-size:18px;height:20px;">
            <div id="desc" style="background-color:white;">
              <h6 style="margin:0px;margin-left:-4px;line-height:20px;text-align:center;background-color:#a1dbdf;cursor:pointer;">
                <span style="color:black;">注意事项</span>
                <span id="xy" style="color:#044950;">（点击可隐藏/展开）</span>
              </h6>
            </div>
          </div>
          <!-- 注意事项 详情 -->
          <transition name="mini">
            <div id="showOrHidden" v-show="isOpenTip" class="submark"
                 style="font-size:12px;line-height:14px;height:120px;background-color:#F2F2F2;">
              <table border="0" style="margin: 0; padding: 0;">
                <tbody>
                <tr>
                  <td style="vertical-align:top; font-size: 15px; line-height: 20px">1、</td>
                  <td style="font-size: 15px; line-height: 20px; text-align: left;">
                    题号底框灰色代表该小题尚未答题
                  </td>
                </tr>
                <tr>
                  <td style="vertical-align:top; font-size: 15px; line-height: 20px">2、</td>
                  <td style="font-size: 15px; line-height: 20px; text-align: left;">
                    题号底框蓝色代表该小题回答正确
                  </td>
                </tr>
                <tr>
                  <td style="vertical-align:top; font-size: 15px; line-height: 20px">3、</td>
                  <td style="font-size: 15px; line-height: 20px; text-align: left;">
                    题号底框红色代表该小题回答错误
                  </td>
                </tr>
                </tbody>
              </table>

              <div class="tip_info">
                <div class="tip_info_item">
                  <span class="tip_info_icon right"></span>
                  <span class="tip_info_content">回答正确</span>
                </div>

                <div class="tip_info_item">
                  <span class="tip_info_icon no-right"></span>
                  <span class="tip_info_content">回答错误</span>
                </div>

                <div class="tip_info_item">
                  <span class="tip_info_icon none"></span>
                  <span class="tip_info_content">未答试题</span>
                </div>

                <div class="tip_info_item">
                  <span class="iconfont icon-xingxing collection tip_info_iconfont"></span>
                  <span class="tip_info_content">收藏题目</span>
                </div>
              </div>
            </div>
          </transition>
          <div id="itembar">
            <div id="papernav">
              <ul id="P-sj1" style="display: block;">
                <div class="subitem">
                  <!-- 题目选项 -->
                  <a v-for="item in questions" @click="selectQuestion(item)"
                     :class="computedClass(item)"
                     class="navs green1 question_sel_item"
                     style="text-decoration: none;line-height:35px;padding:3px;margin:3px 2px;border-radius: 3px; cursor:pointer;">
                    <span>{{ item.title }}</span>
                    <!-- 是否为未做题 -->
                    <span class="iconfont question_sel_favorite"
                          :class="computedFavorite(item)?'icon-xingxing':''"></span>
                  </a>
                </div>
              </ul>
            </div>
          </div>
        </div>

        <div id="no_question_info" v-show="!curQuestion">本考试暂无相关的题目信息</div>

        <!-- 右侧题目详情 -->
        <div id="container">
          <div class="submitExam" @click="toAnalysisPage">数据分析</div>
          <!-- 题目内容 -->
          <div id="question_frame2" v-if="curQuestion">
            <div id="sjHtml"
                 style="padding-top:0px;margin-bottom:0px;margin-left:10px;border-bottom: 1px solid #ECECEC;">
              <div class="itemGroupTitle">每一道考题下面有A、B、C、D、E五个备选答案，请从中选择一个最佳答案。</div>
              <!-- 题的类型 多个题在一起的 -->
              <div class="itemArea" id="question_content">

                <span class="iconfont question_favorite" @click="questionFavorite"
                      :class="curQuestion.favorite === 1?'icon-xingxing':'icon-xingxing1'">{{
                    curQuestion.favorite === 1 ? '取消收藏' : '收藏题目'
                  }}</span>

                <p>第 <span class="itemName">{{ selectData.title }}</span> 题</p>

                <!-- 材料题展示区 -->
                <div class="material_wrapper" v-if="selectData.type === 2">
                  <div class="material_title">{{ selectData.material.label }}</div>
                  <div class="material_content" v-html="selectData.material.text"></div>
                </div>

                <!-- 材料题选项 -->
                <div class="itemTitle">
                  <button type="button" id="b-183" class="itemSubTitle itemSubTitle-active"
                          v-if="selectData.type === 2 && selectData.questions.length>1"
                          v-for="item in selectData.questions">{{ item.index }}
                  </button>
                </div>

                <!-- 题目内容展示 -->
                <div class="itemArea question_wrapper">
                  <div class="itemContext">
                    <label class="labelClss">
                      <span class="question_title" v-html="curQuestion.q"></span>
                    </label>

                    <!-- 音频播放区域 -->
                    <div class="item_audio" v-show="curQuestion.qp">
                      <audio :src="curQuestion.qp" controls="controls" ref="questionAudio">Your browser does not
                        support the
                        audio
                        element.
                      </audio>
                    </div>
                    <!-- 视频播放区域 -->
                    <div class="item_video" v-show="curQuestion.qv">
                      <video :src="curQuestion.qv" controls="controls" ref="questionVideo">Your browser does not
                        support the
                        video
                        element.
                      </video>
                    </div>
                  </div>
                  <!-- 题目选项集合 -->
                  <div class="choiceContext">
                    <label class="labelClss">
                      <div class="choiceXxList" style="margin-left: -12px;">
                        <div class="option_item" v-for="item in curQuestion.oa.opt">
                          <span class="choiceTitle" style="margin-left:25px;line-height:200%">{{ item.k }}.</span>
                          <span class="option_content" style="line-height:200%"
                                v-html="item.c"></span>
                        </div>
                      </div>
                    </label>
                  </div>
                </div>

                <!-- 解析 -->
                <div class="analysis_wrapper">
                  <div class="analysis_btn">答案解析</div>
                  <div class="analysis_content">
                    <div class="analysis_answer_row">
                      <div class="analysis_answer_item">
                        <!-- 答案 -->
                        <label>正确答案: </label>
                        <span class="right">{{ curQuestion.oa.a.sort().toString() }}</span>
                      </div>
                      <!-- 考生作答 -->
                      <div class="analysis_answer_item user_answer">
                        <label>您的作答: </label>
                        <span
                            :class="computedQuestionClass(curQuestion)">
                          {{
                            curQuestion.userAnswer ? curQuestion.userAnswer.sort().toString() : '您没有作答'
                          }}</span>
                      </div>
                    </div>

                    <!-- 考点 -->
                    <div class="analysis_answer_row">
                      <p class="title">【考点】</p>
                      <p class="content">{{ curQuestion.pn }}</p>
                    </div>

                    <!-- 解析 -->
                    <div class="analysis_answer_row">
                      <p class="title">【解析】</p>
                      <p class="content" v-html="curQuestion.a"></p>
                      <!-- 音频播放区域 -->
                      <div class="item_audio" v-show="curQuestion.ap">
                        <audio :src="curQuestion.ap" controls="controls" ref="questionAudio">Your browser does not
                          support the
                          audio
                          element.
                        </audio>
                      </div>
                      <!-- 视频播放区域 -->
                      <div class="item_video" v-show="curQuestion.av">
                        <video :src="curQuestion.av" controls="controls" ref="questionVideo">Your browser does not
                          support the
                          video
                          element.
                        </video>
                      </div>
                    </div>

                    <!-- 考试科目 -->
                    <div class="analysis_answer_row">
                      <p class="title">【考试科目】</p>
                      <p class="content">{{ curQuestion.sn }}</p>
                    </div>
                  </div>
                </div>
                <!-- 解析结束 -->
              </div>
              <!-- 题目内容结束 -->


              <div class="comment_container">
                <div class="comment_inner_wrapper">

                  <div class="input_wrapper">
<!--                    <span class="iconfont icon-bianji" title="点击保存笔记" @click="saveNote(this.value)"></span>-->
                    <div class="save_note_btn" @click="saveNote()">发表笔记</div>
                    <textarea ref="noteData" placeholder="请输入笔记..." class="input"
                              :value="curQuestion.notes?curQuestion.notes.content:''"></textarea>
                  </div>

                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
    </div>


  </form>
</template>

<script type="text/ecmascript-6">
import {examMixin} from "../mixins/mixin";
import {formatHTML} from "@/utils/common";
import {sha1} from "@/utils/sha1";
import {onMounted, ref} from 'vue';
import {countDownFormat, getRequestQuery} from "../utils/common";
import {getQuestions, submitNote, submitFavorite} from "@/api/exam";

export default {
  data() {
    //  获取登录用户
    let loginUser = this.getStore("loginUser");
    let idCard = loginUser && loginUser.mobile ? loginUser.mobile : "无";
    let idNumber = loginUser && loginUser.idNo ? loginUser.idNo : "无";

    return {
      //  练习id
      viewId: null,
      examName: '加载中...',
      //  考试编号
      examId: null,
      //  当前题目集合(已经格式化的)
      questions: [],
      //  考试最终结果
      examResult: {},
      //  用户昵称
      nickname: loginUser.nickname,
      //  准考证号码
      idCard: idCard,
      //  身份证号码
      idNumber: idNumber,
      //  如果在没有题目时,是否显示没有题目的提示
      isOpenTip: true,
      //  当前正在做的题目
      curQuestion: null,
      //  当前选中的题目所属的提级(一个题目有一个自己封装的提级,如果是材料题,则一个提级中可能存在多个题目)
      selectData: null,
      //  当前试卷的最大题目索引号
      maxQuestionIndex: 0,
      //  考试时间(分钟)
      time: 60,
      //  加入考试时间
      joinTime: null,
      //  定时器标记
      timer: null,
      //  判断考试是否已经完成
      complete: false,
      //  提交试卷时的弹窗是否显示标记
      tipWindow: false,
      //  当前试卷是否已提交
      isSubmit: false,
      //  考试结果弹窗是否显示标记
      resultWindow: false
    }
  },
  setup() {
    let noteData = ref(null);
    let leftNav = ref(null);
    // let countDownRef = ref(null);
    return {
      noteData,leftNav
      // countDownRef
    };
  },
  computed: {
    //  题目总数量
    answerQuestionCount() {
      let count = 0;
      this.questions.forEach(item => {
        item.questions.forEach(question => {
          if (question.userAnswer && question.userAnswer.length > 0) count += 1;
        })
      })
      return count;
    },
    //  未答题数量
    noAnswerQuestionIds() {
      let collect = [];
      this.questions.forEach(item => {
        item.questions.forEach(question => {
          if (!question.userAnswer || question.userAnswer.length === 0) collect.push(question.index);
        })
      });
      return collect;
    },
  },
  mixins: [examMixin],
  async created() {
    //  获取访问参数
    let queryData = getRequestQuery(), validateFlag = true;
    if (!queryData.id) {
      alert("缺少参数: id");
      validateFlag = false;
    }
    if (!queryData.no) {
      alert("缺少参数: no");
      validateFlag = false;
    }
    if (!queryData.item_no) {
      alert("缺少参数: item_no");
      validateFlag = false;
    }
    //  如果验证失败,则跳转到考题选择界面
    if (!validateFlag) window.location.href = process.env.ERROR_LOCATION;

    //  获取考试题目
    let result = await this.getViewDataById(queryData);
    if (!result) {
      //  如果当前考试的题目不存在,则跳转到首页重新选择考试目录
      window.location.href = process.env.ERROR_LOCATION;
    }
    this.examName = result.name
    //  缓存记录
    this.setStore("viewResult", result);
    this.setStore("questionsResult", result);
    this.viewId = queryData.id;

    //  当前考试的唯一表示
    this.examId = sha1(result.no + "_" + result.item_no);
    //  构建题目集合
    this.questions = this.buildResult(result);
    // console.log(this.questions);
    //  默认选中第一题selectQue
    if (this.questions[0]) this.selectQuestion(this.questions[0]);

    //  判断当前试卷是否已提交
    this.isSubmit = this.getStore("submit_answer_" + this.examId);
    //  如果已经交卷,则无法再做题
    if (this.isSubmit === true) {

      //  标注考试为完成状态
      this.complete = true;
      //  解析得到考试结果
      this.examResult = this._buildSubmitParams();
      //  显示考试结果界面
      this.resultWindow = true;
    }
    this.resetLeftNavHeight();
    window.onresize = ()=>{
      this.resetLeftNavHeight();
    }
  },
  methods: {
    resetLeftNavHeight(){
      if(!this.leftNav)return;
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      let height = clientHeight- 125;
      this.leftNav.style.height = height+"px";
    },
    //  根据id获取当前考试的信息
    async getViewDataById(params) {
      //  获取考试试卷
      let result = await getQuestions(params);
      return result;
    },
    //  计算题目正确答案的css class样式名称
    computedQuestionClass(question) {
      if (question.userAnswer) {
        if (question.oa.a.sort().toString() !== question.userAnswer.sort().toString()) return "no-right";
        return "right";
      } else {
        return "none";
      }
    },
    //  计算题目集合的css class样式
    computedClass(questionItem) {
      let returnClass = [];
      if (this.selectData === questionItem) returnClass.push("active_q");
      if (questionItem.isAnswer) {
        let isRight = true;
        questionItem.questions.forEach(question => {
          if (this.computedQuestionClass(question) !== "right") isRight = false;
        })
        returnClass.push(isRight ? "right" : "no-right");
      } else {
        returnClass.push("none");
      }
      return returnClass.join(" ");
    },
    //  计算当前题目集合是否有题目别收藏,如果有则显示收藏标记
    computedFavorite(questionItem) {
      let flag = false;
      questionItem.questions.forEach(question => {
        if (question.favorite === 1) flag = true;
      });
      return flag;
    },
    //  考试倒计时
    countDownFunc() {
      //  考试倒计时计算
      let joinTime = this.joinTime;
      if (typeof joinTime === "string") joinTime = new Date(joinTime);
      let endTime = new Date();
      endTime.setTime(joinTime.getTime() + (this.time * 1000));
      let diffTime = parseInt((endTime - new Date().getTime()) / 1000);
      let timeText = countDownFormat(diffTime);
      if (this.countDownRef) this.countDownRef.innerText = timeText;
      if (timeText === "00:00:00") {
        //  考试到期,显示答案并提交试卷
        return false;
      }
      return true;
    },
    //  初始化考试题目
    buildResult(result) {
      let materialData = result.qd && result.qd[1] ? result.qd[1] : [],
          questions = result.questions;
      let formatQuestions = [];
      //  题号索引
      let index = 1;
      let storeAnswer = this.getAnswer();
      //  格式化普通题目
      questions.forEach(item => {
        let questionItem = {
          //  题号标题,1,2,3-6
          title: index,
          //  类型,1:普通题目,2:材料题
          type: item.t,
          isAnswer: false,
          //  题目集合
          questions: []
        };

        //  设置已做的题目
        if (storeAnswer[item.id]) {
          questionItem.isAnswer = true;
          item.userAnswer = storeAnswer[item.id];
        }

        if (item.t === 1) {
          //  如果是普通题目,则直接加入到题目集合中
          item.index = index;
          questionItem.questions.push(item);
          formatQuestions.push(questionItem);
          index += 1;
        } else {
          //  如果是材料题,则增加到材料题的题目集合中
          if (materialData[item.qd]) {
            let material = materialData[item.qd];
            if (material.questions == null) material.questions = [];
            material.questions.push(item);
          }
        }
      });
      //  归类材料题
      materialData.forEach(item => {
        //  如果当前材料没有题目,则直接返回
        if (!item.questions) return null;
        let questionItem = {
          type: 2,
          isAnswer: false,
          questions: [],
          material: {
            label: item.label,
            text: formatHTML(item.text)
          }
        };
        //  题号起始位置
        let startFlag = index;
        item.questions.forEach(question => {
          if (question.userAnswer) questionItem.isAnswer = true;
          if (question.mark) questionItem.isMark = true;
          question.index = index;
          questionItem.questions.push(question);
          index += 1;
        });
        //  判断题号标题
        questionItem.title = (startFlag + 1) === index ? index - 1 : (startFlag) + "-" + index - 1;
        formatQuestions.push(questionItem);
      });
      this.maxQuestionIndex = index - 1;
      return formatQuestions;
    },
    //  选中某个题目时
    selectQuestion(data, index = 0) {
      //  如果所选择的是当前题目,则直接返回
      if (this.curQuestion && this.curQuestion.index === index) return false;
      this.selectData = data;
      let curQuestion = data.questions[index];
      //  格式化替换题目中的html
      curQuestion.q = formatHTML(curQuestion.q);
      //  格式化替换解析中的html
      curQuestion.a = formatHTML(curQuestion.a);
      if (curQuestion.oa && curQuestion.oa.opt) {
        curQuestion.oa.opt.forEach(item => {
          item.c = formatHTML(item.c);
        });
      }
      this.curQuestion = curQuestion;
    },
    //  根据序号获取题目
    selectQuestionByIndex(index) {
      this.questions.forEach(item => {
        let itemIndex = 0;
        item.questions.forEach(question => {
          if (question.index === index) {
            this.selectQuestion(item, itemIndex);
            itemIndex += 1;
          }
        })
      })
    },
    //  获取上一题
    prefQuestion() {
      let curIndex = this.curQuestion.index;
      if (curIndex === 1) return false;
      this.selectQuestionByIndex(curIndex - 1);
    },
    //  获取下一题
    nextQuestion() {
      let curIndex = this.curQuestion.index;
      if (curIndex === this.maxQuestionIndex) return false;
      this.selectQuestionByIndex(curIndex + 1);
    },
    //  获取当前试卷的题目
    getAnswer() {
      let answer = this.getStore("answer_" + this.examId);
      if (!answer) answer = {};
      return answer;
    },
    //  打开交卷弹窗
    toAnalysisPage() {
      // TODO 跳转到数据分析页面
      window.location.href = "/imitate/report"
    },
    //  得到考试结果,构建服务器请求数据
    async _buildSubmitParams() {
      //  得到试卷信息
      let questionResult = this.getStore("viewResult");
      //  得到考试时间
      let examTime = parseInt((new Date().getTime() - new Date(this.joinTime).getTime()) / 1000);
      //  如果当前时间超过了交卷时间,则使用最大时间
      if (examTime > (this.time * 60)) examTime = this.time * 60;

      //  服务器请求参数
      let params = {
        id: questionResult.id,
        no: questionResult.no,
        item_no: questionResult.item_no,
        answer_time: examTime,
        answer: {},
        //  答题正确数量
        rightCount: 0,
        //  试卷总分
        totalScore: 0,
        //  试卷得分
        score: 0
      };

      //  遍历所有题目
      this.questions.forEach(item => {
        item.questions?.forEach(question => {
          //  计算总分
          params.totalScore += question.score;
          //  判断当前答题是否正确
          let isRight = false;
          if (question.userAnswer) isRight = question.oa.a.sort().toString() === question.userAnswer.sort().toString();

          //  如果答对,则增加对题数量以及考试分数
          if (isRight) {
            params.rightCount += 1;
            params.score += question.score;
          }
          params.answer[question.id] = {
            //  得分
            s: isRight ? question.score : 0,
            //  考生答案
            a: question.userAnswer ? question.userAnswer : [],
            //  类型
            t: question.t
          };
        });
      });

      return params;
    },
    //  保存笔记
    async saveNote() {
      let noteData = this.noteData.value;
      if (!noteData) return false;
      let resultQuestions = this.getStore("questionsResult");
      if (this.curQuestion.notes == null) this.curQuestion.notes = {};
      this.curQuestion.notes.content = noteData;
      //  保存笔记到服务器
      let params = {
        qid: this.curQuestion.id,
        no: resultQuestions.no,
        item_no: resultQuestions.item_no,
        content: noteData
      };
      let result = await submitNote(params);
      alert("保存笔记成功");
      console.log("保存笔记成功", result);
    },
    //  收藏题目
    async questionFavorite() {
      let resultQuestions = this.getStore("questionsResult");
      this.curQuestion.favorite = this.curQuestion.favorite === 1 ? 0 : 1;
      let result = await submitFavorite({
        qid: this.curQuestion.id,
        no: resultQuestions.no,
        item_no: resultQuestions.item_no
      });
      // alert("收藏题目成功");
      console.log("收藏题目成功", result);
    }
  }
};


</script>
<style src="@/assets/static/imgkaoing/exam.css" scoped/>
<style src="@/assets/static/imgkaoing/style.css" scoped/>
<style src="@/assets/static/imgkaoing/item.css" scoped/>
<style src="@/assets/static/iconfont/iconfont.css" scoped/>
<style lang="stylus" rel="stylesheet/stylus">
.submitExam
  width: 110px;
  height: 40px;
  line-height: 40px;
  border-radius 3px;
  background: #ffffff
  color: red
  border: 1px solid #000000
  text-align: center;
  cursor: pointer;
  position: absolute
  right: 110px;
  font-weight bold

.question_favorite
  position: absolute
  right: 10px;
  top: 20px;
  font-size: 20px !important;
  cursor: pointer

  &:before
    margin-right: 5px
.item_audio
  audio
    display: block !important;

.item_video
  max-height: 300px
  max-width: 500px;
  video
    max-height: 300px
    max-width: 500px;
.tip_info
  display: block
  color: rgb(138, 112, 120)
  line-height: 25px

  .tip_info_item
    width: 100px
    display: inline-block
    vertical-align: middle
    box-sizing: border-box
    position: relative
    cursor: default

    .tip_info_iconfont
      position: absolute
      left: 0
      top: 0
      color: rgb(255, 235, 0)

    .tip_info_icon
      position: absolute
      left: 0
      top: 5px
      display: inline-block
      line-height: 20px;
      width: 15px
      height: 15px

      &.right
        background: rgb(0, 174, 255) !important

      &.no-right
        background: rgb(252, 134, 112) !important

      &.none
        background: rgb(195, 191, 191) !important

    .tip_info_content
      line-height: 25px
      display: inline-block
      margin-left: 20px

.question_wrapper
  border-bottom: 1px solid #ccc

.active_q
  background: rgba(161, 219, 223, 1) !important

.question_sel_item
  position: relative

  .question_sel_favorite
    font-size 10px;
    position: absolute
    left: 0
    top: -10px
    color: rgb(255, 235, 0)

.question_sel_item
  &.none
    background: rgb(195, 191, 191) !important

.question_sel_item
  &.right
    background rgb(0, 174, 255) !important

.question_sel_item
  &.no-right
    background rgb(252, 134, 112) !important

.question_title, .material_content, .option_item
  display: block;

  img
    vertical-align middle

#container
  height: 100%
  width: 100%

.material_wrapper
  padding: 15px;
  min-height: 100px;

  .material_title
    line-height: 25px;
    font-weight: bold

  .material_content
    margin-left: 20px;

#no_question_info
  position: fixed
  left: 50%;
  top: 50%;
  width: 200px;
  text-align center
  margin-top: -10px;
  line-height: 20px;

#question_content
  position: absolute
  left: 390px;
  right: 0;
  top: 80px;
  bottom: 250px;
  overflow-y: scroll

body
  border: 1px solid transparent
  background: url(@/assets/static/imgkao/background.jpg) repeat-x;

#xxList
  display: inline-block

  .option_item
    display: inline-block
    margin: 10px;
    cursor: pointer

.wrapper
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: left
  font-family: "宋体"

&.mini-enter-active, &.mini-leave-active
  transition: all 0.4s ease

&.mini-enter, &.mini-leave-to
  height: 0 !important;
  overflow: hidden

.result_table
  border: 1px solid #f0f0f0
  width: 100%
  text-align: center
  line-height: 30px

#showOrHidden
  font-weight: bold
  padding: 10px;


.analysis_wrapper
  padding: 10px;
  font-size: 14px

  .analysis_btn
    width: 100px;
    background: rgb(63, 146, 150)
    text-align: center
    display: inline-block
    cursor: pointer
    color: #ffffff
    border-radius: 5px
    line-height: 25px;
    font-weight: bold

  .analysis_answer_row
    padding: 10px
    line-height: 25px

    p
      margin: 10px 0
      cursor: default

    .title
      font-weight: bold

    .content
      padding-left: 20px
      font-weight: bold

    .analysis_answer_item
      display: inline-block

      label
        font-weight: bold

      span
        min-width: 50px
        display: inline-block
        font-size: 16px
        text-align: center
        font-weight: bold

        &.right
          color: rgb(109, 206, 129)

        &.no-right
          color: rgb(252, 134, 112)

        &.none
          color: rgb(195, 191, 191)

.comment_container
  position: fixed
  bottom: 0
  left: 390px
  right: 0
  padding-top: 165px

  .comment_inner_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    padding: 10px

    .input_wrapper
      border: 1px solid #000000
      height: 135px
      width: 100%
      border-radius: 6px
      .save_note_btn
        background: rgb(129,211,250)
        color: #ffffff
        text-align: center
        height: 30px
        line-height: 30px
        display: inline-block
        width: 90px
        border-radius: 6px
        font-size: 12px
        cursor: pointer
        position: absolute
        bottom: 25px
        left: 20px
      .iconfont
        position: absolute
        left: 30px
        top: 21%
        line-height: 20px
        font-size: 25px
        margin-top: -10px
        cursor: pointer
        &:hover
          color: #00aeff
      .input
        border: none
        resize: none
        margin-left: 5px;
        height: 100px
        width: 99%
        outline: none
        padding: 10px 10px
        box-sizing: border-box
        font-size: 20px
</style>
